<template>
  <!--销售机会-->
  <div class="opp">
    <!--机会查找-->
    <el-row>
      <span style="padding: 0 10px"><i class="font-14 el-icon-s-open"></i></span>
      <el-select v-model="filterValue" @change="initData(currPage, pageSize,filterValue,vagueValue,content)" placeholder="全部数据" style="width: 120px">
        <el-option-group v-for="group in filterOptions" :key="group.label" :label="group.label">
          <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item">
          </el-option>
        </el-option-group>
      </el-select>
      <span style="padding: 0 10px 0 30px"><i class="fn el-icon-message-solid"></i></span>
      <el-input v-model="content" clearable placeholder="请输入内容" clearable style="width: 150px"></el-input>
      <el-select v-model="vagueValue" @change="initData(currPage, pageSize,filterValue,vagueValue,content)" placeholder="机会主题" style="width: 120px">
        <el-option v-for="item in vagueOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button @click="initData(currPage, pageSize,filterValue,vagueValue,content)" icon="el-icon-search" size="small" circle></el-button>
    </el-row>
    <!--新建机会-->
    <el-row style="margin-top: 15px">
      <el-col :span="12">
        <span>销售机会</span>
        <small class="text-muted font-13">共{{totalSize}}条</small>
      </el-col>
      <el-col :span="12" class="text-right">
        <el-button type="text" @click="dialogFormVisible = true">
          <el-button size="small" icon="el-icon-circle-plus-outline">新建</el-button>
        </el-button>
      </el-col>
      <!--销售机会dialog-->
      <el-dialog title="销售机会" :visible.sync="dialogFormVisible" @open="openDialog" @close='closeDialog' width="60%" style="color: #333333">
        <el-form :model="opportunity" ref="opp" label-width="100px" :rules="rules">
          <el-divider><span class="font-14-bold">机会</span></el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item label="机会主题:" prop="oppTheme">
                <el-input v-model="opportunity.oppTheme" placeholder="机会主题" style="width: 79%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="更新日期:">
                <el-input v-model="opportunity.oppUpdateDate" :disabled="true" style="width: 79%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="客户:" prop="customerByCustomerId.customerName" >
                <el-input :disabled="true" v-model="opportunity.customerByCustomerId.customerName" style="width: 79%"></el-input>
              </el-form-item>
              <div class="form-inline" v-show="isCustomer">
                <el-input v-model="customerValue" clearable size="medium" placeholder="拼音.字母.关键字" style="width: 35%"></el-input>
                <el-button @click="findCustomer" size="medium" icon="el-icon-search"></el-button>
                <el-popover placement="top" v-model="visible">
                  <div style="margin-bottom: 10px">
                    <span>查询条件:{{customerValue}}</span>
                    <span @click="cleanCustomer" class="cursor" style="float: right"><i class="el-icon-error"></i></span>
                  </div>
                  <ul class="cu-ul" v-if="customerList2 !== ''">
                    <li @click="choiceCustomer2(item)" v-for="item in customerList2">{{item.customerName}}</li>
                  </ul>
                  <div style="margin: 5px 0;text-align: center" v-if="customerList2 == ''">
                    <i class="el-icon-warning-outline"/>没有符合条件的客户！
                  </div>
                </el-popover>
                <el-tooltip class="item" effect="dark" content="浏览选择客户" placement="bottom">
                  <el-button @click="innerVisible(cusCurrPage,cusPageSize)" size="medium" icon="el-icon-s-operation"></el-button>
                </el-tooltip>
              </div>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态:">
                <el-radio-group v-model="opportunity.oppStatus">
                  <el-radio :label="1">跟踪</el-radio>
                  <el-radio :disabled="true" :label="2">成功</el-radio>
                  <el-radio :label="3">失败</el-radio>
                  <el-radio :label="4">搁置</el-radio>
                  <el-radio :label="5">失效</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider><span class="font-14-bold">基本情况</span></el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item  label="客户联系人:">
                <el-select v-model="opportunity.oppContactName" placeholder="未选" style="width: 79%">
                  <el-option v-for="(item,index) in contactList" :key="index" :label="item.contactName" :value="item.contactName">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类型:">
                <el-select v-model="opportunity.oppClassify" placeholder="未选" style="width: 79%">
                  <el-option v-for="(item,index) in lxOptions" :key="index" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="发现时间:">
                <el-date-picker v-model="opportunity.oppFindDate" type="date" placeholder="选择日期" style="width: 79%"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="来源:" prop="oppSource">
                <el-select v-model="opportunity.oppSource" placeholder="未选" style="width: 79%">
                  <el-option v-for="(item, index) in lyOptions" :key="index" :value="item.value" :label="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="负责人:" prop="employeeByEmpId.empName">
                <el-input :disabled="true" v-model="opportunity.employeeByEmpId.empName" style="width: 79%">
                  <el-button @click="openEmpDialog" slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="提供人:">
                <el-input v-model="opportunity.oppOffer" style="width: 79%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="客户需求:">
                <el-input v-model="opportunity.oppNeed" style="width: 91%" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider><span class="font-14-bold">预期</span></el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item label="预计签单日期:">
                <el-date-picker v-model="opportunity.oppSignDate" type="date" placeholder="选择日期" style="width: 79%"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="可能性:" prop="oppPossibility">
                <el-select v-model="opportunity.oppPossibility" placeholder="未选"style="width: 79%">
                  <el-option v-for="(item,index) in knxOptions" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="预期金额:" prop="oppExpectSum">
                <el-input v-model.number="opportunity.oppExpectSum" placeholder="" style="width: 79%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider><span class="font-14-bold">当前状态</span></el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item label="阶段:" prop="oppStage">
                <el-select v-model="opportunity.oppStage" placeholder="未选" style="width: 79%">
                  <el-option v-for="(item,index) in jdOptions" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="优先:">
                <el-select v-model="opportunity.oppPriority" placeholder="未选" style="width: 79%">
                  <el-option v-for="(item,index) in yxOptions" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="阶段备注:">
                <el-input v-model="opportunity.oppPriRemark" style="width: 91%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="跟踪日志:">
                <div v-if="traceList.length !== 0" class="gz-style">
                  <div :key="index" v-for="(trace,index) in traceList">
                      <span class="margin-r-3">日期：{{trace.traceDate}}</span>
                      <span class="margin-r-3">阶段：{{trace.traceStage}}（{{trace.tracePrincipal}}）</span>
                      <span class="margin-r-3">预计：{{trace.traceSignDate}}（￥{{trace.traceExpectSum}}）</span>
                      <span class="margin-r-3">备注：{{trace.tracePriRemark}}</span>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="7">
              <el-form-item>
                <el-button @click="addOpportunity()" type="primary">保存</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!--内层dialog-->
        <el-dialog width="30%" title="客户选择" :visible.sync="innerDialog" append-to-body>
          <!--选择客户-->
            <el-table :data="customerList" style="width: 100%">
              <el-table-column prop="customerId" label="客户编号" >
              </el-table-column>
              <el-table-column prop="customerName" label="客户名" >
              </el-table-column>
              <el-table-column label="请选择" >
                <template slot-scope="scope">
                  <el-button size="mini" @click="choiceCustomer(scope.row)" icon="el-icon-check" type="primary" circle style="margin-left: 10px"></el-button>
                </template>
              </el-table-column>
            </el-table>
          <el-row style="margin-top:10px">
            <el-col :span="16">
              <el-pagination layout="prev, pager, next, jumper" :total="cusTotalSize" @current-change="cusChangePage"
                             :current-page.sync="cusCurrPage" :page-size="cusPageSize"></el-pagination>
            </el-col>
          </el-row>
        </el-dialog>
        <!--内层dialog员工-->
        <el-dialog width="30%" title="人员选择" :visible.sync="innerDialogEmp" append-to-body @close="closeInnerDialogEmp">
          <div>
            <el-collapse v-model="activeName">
              <el-collapse-item v-for ="(dept,index) in deptList" :title="dept.deptName" :key="index" :name="dept.deptId">
                <ul class="emp-ul">
                  <li @click="choiceEmp(emp)" v-for="(emp,index) in dept.employeeByDeptId">
                    <span v-if="index !== dept.employeeByDeptId.length-1" class="line-style"></span>
                    <span v-if="index === dept.employeeByDeptId.length-1" class="line-style-end"></span>
                    <span class="">{{emp.empName}}</span>
                  </li>
                </ul>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-dialog>
      </el-dialog>
    </el-row>
    <!--机会表格-->
    <el-table ref="multipleTable" :data="opportunityList" tooltip-effect="dark" id="outTable" style="width: 100%"
              @selection-change="handleSelectionChange" border :header-cell-style="rowClass">
      <el-table-column type="selection" width="35"></el-table-column>
      <el-table-column prop="oppId" label="ID" wsortable width="60" sortable></el-table-column>
      <el-table-column label="机会主题" width="130px">
        <template slot-scope="scope">
          <router-link :to="{path:'/opportview',query: {oppId: scope.row.oppId}}">
            <div style="color: #333333">
              <i class="el-icon-caret-right"></i>
              <span>{{scope.row.oppTheme}}</span>
            </div>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="客户" width="120">
        <template slot-scope="scope">
          <div style="color: #333333">
            <span>{{scope.row.customerByCustomerId.customerName}}</span>
            <el-tooltip class="item" effect="dark" content="打开详细页面" placement="bottom">
              <router-link :to="{path:'/customerview',query: {customerId: scope.row.customerByCustomerId.customerId}}">
                <span style="color: #333333">
                  <i class="el-icon-s-cooperation"></i>
                </span>
              </router-link>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="优先" width="60">
        <template slot-scope="scope">
          <span v-if="scope.row.oppPriority == 1">{{yxOptions[0].label}}</span>
          <span v-if="scope.row.oppPriority == 2">{{yxOptions[1].label}}</span>
          <span v-if="scope.row.oppPriority == 3">{{yxOptions[2].label}}</span>
        </template>
      </el-table-column>
      <el-table-column label="类型" width="110">
        <template slot-scope="scope">
          <span v-if="scope.row.oppClassify == 1">{{lxOptions[0].label}}</span>
          <span v-if="scope.row.oppClassify == 2">{{lxOptions[1].label}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="employeeByEmpId.empName" label="负责人"></el-table-column>
      <el-table-column prop="oppSignDate" label="预计签单日期" width="130px" sortable>
        <template slot-scope="scope">
          <span>{{scope.row.oppSignDate | formatDateJudge}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="oppExpectSum" label="预期金额"  width="102px" sortable>
        <template slot-scope="scope">
          <span>￥{{scope.row.oppExpectSum}}</span>
        </template>
      </el-table-column>
      <el-table-column label="可能性" width="65">
        <template slot-scope="scope">
          <span v-if="scope.row.oppPossibility == 1">{{knxOptions[0].label}}</span>
          <span v-if="scope.row.oppPossibility == 2">{{knxOptions[1].label}}</span>
          <span v-if="scope.row.oppPossibility == 3">{{knxOptions[2].label}}</span>
          <span v-if="scope.row.oppPossibility == 4">{{knxOptions[3].label}}</span>
          <span v-if="scope.row.oppPossibility == 5">{{knxOptions[4].label}}</span>
          <span v-if="scope.row.oppPossibility == 6">{{knxOptions[5].label}}</span>
          <span v-if="scope.row.oppPossibility == 7">{{knxOptions[6].label}}</span>
          <span v-if="scope.row.oppPossibility == 8">{{knxOptions[7].label}}</span>
          <span v-if="scope.row.oppPossibility == 9">{{knxOptions[8].label}}</span>
          <span v-if="scope.row.oppPossibility == 10">{{knxOptions[9].label}}</span>
          <span v-if="scope.row.oppPossibility == 11">{{knxOptions[10].label}}</span>
        </template>
      </el-table-column>
      <el-table-column label="阶段">
        <template slot-scope="scope">
          <span v-if="scope.row.oppStage == 1">{{jdOptions[0].label}}</span>
          <span v-if="scope.row.oppStage == 2">{{jdOptions[1].label}}</span>
          <span v-if="scope.row.oppStage == 3">{{jdOptions[2].label}}</span>
          <span v-if="scope.row.oppStage == 4">{{jdOptions[3].label}}</span>
          <span v-if="scope.row.oppStage == 5">{{jdOptions[4].label}}</span>
          <span v-if="scope.row.oppStage == 6">{{jdOptions[5].label}}</span>
          <span v-if="scope.row.oppStage == 7">{{jdOptions[6].label}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="60">
        <template slot-scope="scope">
          <span v-if="scope.row.oppStatus == 1">{{ztOptions[0].label}}</span>
          <span v-if="scope.row.oppStatus == 2">{{ztOptions[1].label}}</span>
          <span v-if="scope.row.oppStatus == 3">{{ztOptions[2].label}}</span>
          <span v-if="scope.row.oppStatus == 4">{{ztOptions[3].label}}</span>
          <span v-if="scope.row.oppStatus == 5">{{ztOptions[4].label}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="oppUpdateDate" label="更新日期" width="110px">
        <template slot-scope="scope">
          <span>{{scope.row.oppUpdateDate | formatDateJudge}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="135px">
        <template slot-scope="scope">
          <router-link :to="{path:'/opportview',query: {oppId: scope.row.oppId}}">
            <el-tooltip class="item" effect="dark" content="视图" placement="bottom">
              <el-button size="mini" icon="el-icon-tickets" type="success" circle></el-button>
            </el-tooltip>
          </router-link>
          <span v-if="scope.row.oppStatus !== 2">
            <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
              <el-button size="mini" @click="handleEdit(scope.row)" icon="el-icon-edit" type="primary" circle style="margin-left: 10px"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
              <el-button size="mini" @click="handleDelete(scope.row)" icon="el-icon-delete" type="danger" circle></el-button>
            </el-tooltip>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row style="margin-top:10px">
      <el-col :span="8">
        <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
          <el-button style="padding: 12px 12px" icon="el-icon-delete" @click="handleDeleteMany" type="danger"></el-button>
        </el-tooltip>
      </el-col>
      <el-col :span="13">
        <el-pagination layout="sizes,prev,pager, next, jumper" :total="totalSize" @current-change="changePage"
                       :current-page.sync="currPage" :page-size="pageSize" :page-sizes="pageSizes" @size-change="changeSize"></el-pagination>
      </el-col>
      <el-col :span="3">
        <el-tooltip class="item" effect="dark" content="打印列表" placement="bottom">
          <el-button @click="handleWindowPrint('#outTable', '列表打印')" style="padding: 12px 12px" type="info" plain  icon="el-icon-printer"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="批量导出Excel格式数据" placement="bottom">
          <el-button @click="batchExportExcel" style="padding: 12px 12px" type="info" plain  icon="el-icon-document-copy"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="导出Excel格式数据" placement="bottom">
          <el-button @click="exportExcel" style="padding: 12px 12px" type="info" plain  icon="el-icon-document-remove"></el-button>
        </el-tooltip>
      </el-col>
    </el-row>
    <!-- 统计-->
    <el-row>
      <el-col :span="8">
        <div class="font-14-bold" style="margin: 30px 0 0 30px">分布</div>
        <div style="width: 400px;height:400px;margin: 20px auto 0px" ref="pieCharts"></div>
        <div style="margin-left: 30px">
          <el-select v-model="pieValue" @change="changePie(pieValue)" placeholder="未选" style="width: 350px">
            <el-option v-for="item in pieOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="font-14-bold" style="margin: 30px 0 0 30px">Top</div>
        <div style="width: 400px;height:400px;margin: 20px auto 0px" ref="columnarCharts"></div>
        <div style="margin-left: 30px">
          <el-select v-model="columnarValue" @change="changeColumnar(columnarValue)" placeholder="未选" style="width: 350px">
            <el-option v-for="item in columnarOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="font-14-bold" style="margin: 30px 0 0 30px">工具</div>
        <div style="width: 400px;height:400px;margin: 20px auto 0px" ref="lineCharts"></div>
        <div style="margin-left: 30px">
          <el-select v-model="lineValue" @change="changeLine(lineValue)" placeholder="未选" style="width: 350px">
            <el-option v-for="item in lineOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
    <!--销售漏斗-->
    <el-row>
      <div style="margin: 30px 0 0 30px">
        <span class="font-14-bold">销售漏斗:</span>
        <span>仅统计<span style="color: red">“状态=跟踪”</span>的销售机会</span>
        <div style="margin: 30px 0 0 0">
          <router-link :to="'/salesFunnel'">
            <el-button @click="">查看销售漏斗详细数据</el-button>
          </router-link>
        </div>
      </div>
      <el-row>
        <el-col :span="12">
          <div class="font-14-bold" style="margin: 30px 0 0 30px;text-align:center">各阶段数量</div>
          <div style="width: 500px;height:500px;margin: 20px auto 0px" ref="salesCharts"></div>
        </el-col>
        <el-col :span="12">
          <div class="font-14-bold" style="margin: 30px 0 0 30px;text-align:center">各阶段机会预期金额</div>
          <div style="width: 500px;height:500px;margin: 20px auto 0px" ref="salesSumCharts"></div>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
  import {formatTimeToStr} from "../assets/format";
  import XLSX from "xlsx";
  import FileSaver from "file-saver";

  export default {
  data () {
    return {
      emp:{},
      dialogFormVisible: false,
      opportunityList: [], // 机会视图集合分页
      customerList: [], // 员工客户名称
      contactList: [], // 员工联系人集合
      traceList: [],
      trace: {
        traceId:0,
        traceDate:'',
        traceStage:'',
        tracePrincipal:'',
        traceSignDate:'',
        traceExpectSum:'',
        tracePriRemark:'',
        opportunityByOppId:''
      },
      pageSize: 10, // 分页页大小
      pageSizes:[10,20,30],//页大小数组
      currPage: 1, // 当前页码，默认为1
      totalSize: 0, // 总记录数
      cusPageSize: 5, // 分页页大小
      cusCurrPage: 1, // 当前页码，默认为1
      cusTotalSize: 0, // 总记录数
      opportunity: {
        oppId: 0,
        oppTheme: '',
        oppUpdateDate: '',
        oppStatus: '',
        oppClassify: '',
        oppFindDate: '',
        oppSource: '',
        oppOffer: '',
        oppNeed: '',
        oppSignDate: '',
        oppPossibility: '',
        oppExpectSum: '',
        oppStage: '',
        oppPriRemark: '',
        oppPriority: '',
        oppContactName: '',
        customerByCustomerId: {},
        employeeByEmpId: {}
      },
      isCustomer: true, // 客户搜索显示
      innerDialog: false,// 内层dialog客户
      innerDialogEmp: false,// 内层dialog员工
      activeName: [],
      deptList:[],
      content: '',// input内容
      customerValue:'',// 模糊查询客户
      customerList2:[],// 模糊查询结果
      visible: false,// 模糊搜索结果
      // 表单验证
      rules: {
        oppTheme: [{
          required: true,
          message: '必须填',
          trigger: 'blur'
        }, {
          min: 2,
          max: 8,
          message: '长度在 2 到 8 个字符',
          trigger: 'blur'
        }],
        'customerByCustomerId.customerName': [
          { required: true, message: '请选择客户', trigger: 'blur' }
        ],
        'employeeByEmpId.empName': [
          { required: true, message: '请选择负责人', trigger: 'blur' }
        ],
        oppStage: [
          { required: true, message: '必须填', trigger: 'blur' }
        ],
        oppExpectSum: [
          { required: true, message: '必须填'},
          { type: 'number', message: '必须为数字'}
        ]
      },
      mulSelection: [],
      // 下拉列表
      yxOptions: [{
        value: 1,
        label: '一级'
      }, {
        value: 2,
        label: '二级'
      }, {
        value: 3,
        label: '三级'
      }],
      lxOptions: [{
        value: 1,
        label: '潜在销售机会'
      }, {
        value: 2,
        label: '显露销售机会'
      }],
      lyOptions: [{
        value: 1,
        label: '电话来访'
      }, {
        value: 2,
        label: '客户介绍'
      }, {
        value: 3,
        label: '媒体宣传'
      }, {
        value: 4,
        label: '老客户'
      }, {
        value: 5,
        label: '合作伙伴'
      }, {
        value: 6,
        label: '互联网'
      }, {
        value: 7,
        label: '其他'
      }],
      knxOptions: [{
        value: 1,
        label: '0%'
      }, {
        value: 2,
        label: '10%'
      }, {
        value: 3,
        label: '20%'
      }, {
        value: 4,
        label: '30%'
      }, {
        value: 5,
        label: '40%'
      }, {
        value: 6,
        label: '50%'
      }, {
        value: 7,
        label: '60%'
      }, {
        value: 8,
        label: '70%'
      }, {
        value: 9,
        label: '80%'
      }, {
        value: 10,
        label: '90%'
      }, {
        value: 11,
        label: '100%'
      }],
      jdOptions: [{
        value: 1,
        label: '初期沟通'
      }, {
        value: 2,
        label: '立体评估'
      }, {
        value: 3,
        label: '需求分析'
      }, {
        value: 4,
        label: '方案制定'
      }, {
        value: 5,
        label: '竞争'
      }, {
        value: 6,
        label: '商务谈判'
      }, {
        value: 7,
        label: '合同签约'
      }],
      ztOptions: [{
        value: 1,
        label: '跟踪'
      }, {
        value: 2,
        label: '成功'
      }, {
        value: 3,
        label: '失败'
      }, {
        value: 4,
        label: '搁置'
      }, {
        value: 5,
        label: '失效'
      }],
      filterOptions: [{
        label: '',
        options: [{
          value: 0,
          label: '全部数据',
          num:0
        }]
      }, {
        label: '阶段',
        options: [{
          value: 1,
          label: '初期沟通',
          num:1
        }, {
          value: 2,
          label: '立体评估',
          num:2
        }, {
          value: 3,
          label: '需求分析',
          num:3
        }, {
          value: 4,
          label: '方案制定',
          num:4
        }, {
          value: 5,
          label: '招投标/竞争',
          num:5
        }, {
          value: 6,
          label: '商务谈判',
          num:6
        }, {
          value: 7,
          label: '合同签约',
          num:7
        }]
      }, {
        label: '状态',
        options: [{
          value: 8,
          label: '跟踪',
          num:1
        }, {
          value: 9,
          label: '成功',
          num:2
        }, {
          value: 10,
          label: '失败',
          num:3
        }, {
          value: 11,
          label: '搁置',
          num:4
        }, {
          value: 12,
          label: '失效',
          num:5
        }]
      }, {
        label: '优先',
        options: [{
          value: 13,
          label: '一级',
          num:1
        }, {
          value: 14,
          label: '二级',
          num:2
        }, {
          value:15,
          label: '三级',
          num:3
        }]
      }, {
        label: '类型',
        options: [{
          value: 16,
          label: '潜在销售机会',
          num:1
        }, {
          value: 17,
          label: '显露销售机会',
          num:2
        }]
      }],
      filterValue: {value:0,label: '全部数据',num:0},
      vagueOptions: [{
        value: 1,
        label: '机会主题'
      }, {
        value: 2,
        label: '客户名称'
      }],
      vagueValue: 1,
      pieOptions: [{
        value: 1,
        label: '机会来源分布'
      }, {
        value: 2,
        label: '机会分类分布'
      }, {
        value: 3,
        label: '机会负责人分布'
      }],
      pieValue: 1,
      pieList:[],
      pieDataList: [],
      pieNumList: [],
      columnarOptions: [{
        value: 1,
        label: '机会发现时间月份统计'
      }, {
        value: 2,
        label: '机会预计签单月份统计'
      }],
      columnarValue: 1,
      columnarList: [],
      columnarDataList: [],
      columnarNumList: [],
      lineOptions: [{
        value: 1,
        label: '机会状态统计'
      }, {
        value: 2,
        label: '机会阶段统计'
      },  {
        value: 3,
        label: '机会可能性统计'
      }],
      lineValue: 1,
      lineList: [],
      lineDataList: [],
      lineNumList: [],
      salesList: [],
      salesDataList: [],
      salesNumList: [],
      salesSumList: [],
      selectList:[],
    }
  },
  methods: {
    // 查询当前员工
    loginEmp(){
      this.$axios.get('http://localhost:8088/emp')
        .then(v => {
          this.emp = v.data
        })
        .catch(function (v) {})
    },
    // 分页查询所有
    initData (currPage, pageSize,filter,vague,content) {
      this.$axios.get('http://localhost:8088/emp-opp-list', {
        params: {
          page: currPage,
          size: pageSize,
          value:filter.value,
          num:filter.num,
          vague:vague,
          content:content
        }
      })
        .then(v => {
          this.opportunityList = v.data.rows
          this.totalSize = v.data.total
        })
        .catch(function (v) {})
    },
    // 机会表格分页
    changePage (val) {
      this.initData(val,this.pageSize,this.filterValue,this.vagueValue,this.content)
    },
    //改变页大小
    changeSize(val){
      this.pageSize = val
      this.currPage = 1
      this.initData(this.currPage,this.pageSize,this.filterValue,this.vagueValue,this.content)
    },
    // 查询跟踪日志
    findTrace(oppId){
      this.$axios.get('http://localhost:8088/trace-list',{
        params:{
          oppId:oppId
        }
      })
        .then(v => {
          this.traceList = v.data
        })
        .catch(function (v) {})
    },
    // 修改数据回显
    handleEdit (val) {
      this.dialogFormVisible = true
      this.opportunity.oppId = val.oppId
      this.opportunity.oppTheme = val.oppTheme
      this.opportunity.oppUpdateDate = val.oppUpdateDate
      this.opportunity.oppStatus = val.oppStatus
      this.opportunity.oppClassify = val.oppClassify
      this.opportunity.oppFindDate = val.oppFindDate
      this.opportunity.oppSource = val.oppSource
      this.opportunity.oppOffer = val.oppOffer
      this.opportunity.oppNeed = val.oppNeed
      this.opportunity.oppSignDate = val.oppSignDate
      this.opportunity.oppPossibility = val.oppPossibility
      this.opportunity.oppExpectSum = val.oppExpectSum
      this.opportunity.oppPriority = val.oppPriority
      this.opportunity.oppStage = val.oppStage
      this.opportunity.oppPriRemark = val.oppPriRemark
      this.opportunity.employeeByEmpId = val.employeeByEmpId
      this.opportunity.oppContactName = val.oppContactName
      this.opportunity.customerByCustomerId = val.customerByCustomerId
      this.choiceContact(val.customerByCustomerId.customerId)
      this.findTrace(val.oppId)
      this.isCustomer = false
    },
    // 新增
    addOpportunity () {
      // 状态
      this.opportunity.oppUpdateDate = this.addDate()
      this.$refs.opp.validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:8088/save-opportunity',this.opportunity)
            .then(v => {
              // 新增跟踪日志
              this.saveTrace(v.data)
              // 1、刷新数据
              this.sourceData()
              this.findDateData()
              this.statusData()
              this.salesData()
              this.initData(this.currPage,this.pageSize,this.filterValue,this.vagueValue,this.content)
              // 2、关闭弹框
              this.dialogFormVisible = false
              this.pieValue = 1
              this.pieList = []
              this.pieDataList = []
              this.pieNumList = []
              this.columnarValue = 1
              this.columnarList = []
              this.columnarDataList = []
              this.columnarNumList = []
              this.lineValue = 1
              this.lineList = []
              this.lineDataList = []
              this.lineNumList = []
              this.salesList = []
              this.salesDataList = []
              this.salesNumList = []
              this.salesSumList = []
            })
            .catch(function (v) {})
          this.$message({
            type: 'success',
            message: '已保存!'
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 新增跟踪日志
    saveTrace(val){
      this.trace.traceDate = this.addDate()
      if (val.oppStage !== null){
        this.trace.traceStage = this.jdOptions[val.oppStage-1].label
      }
      if (val.oppPossibility !== null){
        this.trace.tracePrincipal = this.knxOptions[val.oppPossibility-1].label
      }
      this.trace.traceSignDate = val.oppSignDate
      this.trace.traceExpectSum = val.oppExpectSum
      this.trace.tracePriRemark = val.oppPriRemark
      this.trace.opportunityByOppId = val
      this.$axios.post('http://localhost:8088/save-trace',this.trace)
        .then(v => {
         this.trace = {
           traceId:0,
           traceDate:'',
           traceStage:'',
           tracePrincipal:'',
           traceSignDate:'',
           traceExpectSum:'',
           tracePriRemark:'',
           opportunityByOppId:''
          }
        })
        .catch(function (v) {})

    },
    // 打开dialog事件
    openDialog () {
      if (this.opportunity.oppId === 0){
        this.opportunity.employeeByEmpId = this.emp
        this.opportunity.oppFindDate = this.addDate()
        this.opportunity.oppStatus = 1
      }
    },
    // 关闭dialog事件
    closeDialog () {
      this.$refs.opp.resetFields()
      this.opportunity = {
        oppId: 0,
        oppTheme: '',
        oppUpdateDate: '',
        oppStatus: '',
        oppClassify: '',
        oppFindDate: '',
        oppSource: '',
        oppOffer: '',
        oppNeed: '',
        oppSignDate: '',
        oppPossibility: '',
        oppExpectSum: '',
        oppPriority: '',
        oppStage: '',
        oppPriRemark: '',
        oppContactName: '',
        customerByCustomerId: {},
        employeeByEmpId: {}
      }
      this.isCustomer = true
      this.contactList = []
      this.traceList = []
    },
    // 打开内层dialog
    innerVisible (cusCurrPage,cusPageSize) {
      this.$axios.get('http://localhost:8088/emp-customer-list', {
        params: {
          page: cusCurrPage,
          size: cusPageSize,
        }
      })
        .then(v => {
          this.customerList = v.data.rows
          this.cusTotalSize = v.data.total
        })
        .catch(function (v) {})
      this.innerDialog = true
    },
    //客户分页
    cusChangePage (val) {
      // val就是当前页码
      this.innerVisible(val, this.cusPageSize)
    },
    // 选择客户
    choiceCustomer(val){
      this.opportunity.customerByCustomerId = val
      this.opportunity.oppContactName = ''
      this.choiceContact(val.customerId)
      this.innerDialog = false;
    },
    // 模糊查询客户
    findCustomer(){
      if (this.customerValue != ''){
        this.visible = true
        this.$axios.get('http://localhost:8088/emp-fuzzy-customer-list', {
          params: {
            customerName: this.customerValue
          }
        })
          .then(v => {
            this.customerList2 = v.data
          })
          .catch(function (v) {})
      }else {
        this.visible = false
      }
    },
    // 模糊选择客户
    choiceCustomer2(val){
      this.opportunity.customerByCustomerId = val
      this.opportunity.oppContactName = ''
      this.choiceContact(val.customerId)
      this.visible = false
      this.customerValue = ''
    },
    // 失去焦点关闭模糊搜索框
    cleanCustomer() {
      this.visible = false
      this.customerValue = ''
    },
    //查询部门员工
    findDeptList () {
      this.$axios.get('http://localhost:8088/dept-emp-list')
        .then(v => {
          this.deptList = v.data
          for(let i = 1;i <= this.deptList.length;i++){
            this.activeName.push(i)
          }
        })
        .catch(function (v) {})
    },
    //打开员工dialog
    openEmpDialog(){
      this.innerDialogEmp = true
      this.findDeptList()
    },
    // 选择员工
    choiceEmp(val) {
      this.opportunity.employeeByEmpId = val
      this.innerDialogEmp = false;
    },
    //关闭员工diglog事件
    closeInnerDialogEmp(){
      this.activeName = []
    },
    // 查询联系人集合
    choiceContact(customerId){
      this.$axios.get('http://localhost:8088/contact-list', {
        params: {
          customerId : customerId
        }
      })
        .then(v => {
          this.contactList = v.data
        })
        .catch(function (v) {})
    },
    //删除提示
    handleDelete (val) {
      this.$confirm('此操作将永久删除销售机会, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteOpp(val.oppId)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 批量删除提示
    handleDeleteMany () {
      this.$confirm('此操作将永久删除勾选销售机会, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteAll()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取批量删除ID数组
    handleSelectionChange (val) {
      this.mulSelection = val
    },
    // 删除axios
    deleteOpp(oppId){
      this.$axios.post('http://localhost:8088/delete-opportunity', this.qs.stringify({oppId: oppId}))
        .then(v => {
          // 1、刷新数据
          this.sourceData()
          this.findDateData()
          this.statusData()
          this.salesData()
          this.initData(this.currPage,this.pageSize,this.filterValue,this.vagueValue,this.content)
          // 2、关闭弹框
          this.pieValue = 1
          this.pieList = []
          this.pieDataList = []
          this.pieNumList = []
          this.columnarValue = 1
          this.columnarList = []
          this.columnarDataList = []
          this.columnarNumList = []
          this.lineValue = 1
          this.lineList = []
          this.lineDataList = []
          this.lineNumList = []
          this.salesList = []
          this.salesDataList = []
          this.salesNumList = []
          this.salesSumList = []
        })
        .catch(function (v) {})
    },
    // 删除所有
    deleteAll () {
      this.mulSelection.forEach(row => {
        if(row.oppStatus === 2){
          this.$refs.multipleTable.clearSelection();
          this.$message({
            type: 'info',
            message: 'ID为'+row.oppId+'的机会已成功，无法删除'
          })
        }else {
          this.deleteOpp(row.oppId)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }
      })
    },
    // 获取当前日期
    addDate () {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    // 切换分布图
    changePie (val){
      this.pieDataList = []
      this.pieNumList = []
      if (val == 1){
        this.sourceData()
      }else if (val == 2){
        this.classifyData()
      }else if (val == 3){
        this.oppEmpData()
      }
    },
    // 来源分布查询
    sourceData () {
      this.$axios.get('http://localhost:8088/source-list')
        .then(v => {
          this.pieList = v.data
          //计算
          this.computeSource()
        })
        .catch(function (v) {})
    },
    // 计算机会来源分布
    computeSource (){
      for(let i=0;i<this.pieList.length;i++) {
        if (this.pieList[i].datas === 1){
          this.pieDataList.push('电话来访');
          this.pieNumList.push({value:this.pieList[i].num,name:'电话来访'})
        } else if (this.pieList[i].datas === 2){
          this.pieDataList.push('客户介绍');
          this.pieNumList.push({value:this.pieList[i].num,name:'客户介绍'})
        }else if (this.pieList[i].datas === 3){
          this.pieDataList.push('媒体宣传');
          this.pieNumList.push({value:this.pieList[i].num,name:'媒体宣传'})
        }else if (this.pieList[i].datas === 4){
          this.pieDataList.push('老客户');
          this.pieNumList.push({value:this.pieList[i].num,name:'老客户'})
        }else if (this.pieList[i].datas === 5){
          this.pieDataList.push('合作伙伴');
          this.pieNumList.push({value:this.pieList[i].num,name:'合作伙伴'})
        }else if (this.pieList[i].datas === 6){
          this.pieDataList.push('互联网');
          this.pieNumList.push({value:this.pieList[i].num,name:'互联网'})
        }else if (this.pieList[i].datas === 7){
          this.pieDataList.push('其他');
          this.pieNumList.push({value:this.pieList[i].num,name:'其他'})
        }else {
          this.pieDataList.push('');
          this.pieNumList.push({value:this.pieList[i].num,name:''})
        }
      }
    },
    // 分类分布查询
    classifyData () {
      this.$axios.get('http://localhost:8088/classify-list')
        .then(v => {
          this.pieList = v.data
          //计算
          this.computeClassify()
        })
        .catch(function (v) {})
    },
    // 计算机会分类分布
    computeClassify(){
      for(let i=0;i<this.pieList.length;i++) {
        if(this.pieList[i].datas === 1){
          this.pieDataList.push('潜在销售机会');
          this.pieNumList.push({value:this.pieList[i].num,name:'潜在销售机会'})
        } else if (this.pieList[i].datas === 2){
          this.pieDataList.push('显露销售机会');
          this.pieNumList.push({value:this.pieList[i].num,name:'显露销售机会'})
        }else{
          this.pieDataList.push('');
          this.pieNumList.push({value:this.pieList[i].num,name:' '})
        }
      }
    },
    // 员工分布查询
    oppEmpData () {
      this.$axios.get('http://localhost:8088/compute-opp-emp')
        .then(v => {
          this.pieList = v.data
          //计算
          this.computeOppEmp()
        })
        .catch(function (v) {})
    },
    // 计算机会员工分布
    computeOppEmp(){
      for(let i=0;i<this.pieList.length;i++) {
        this.pieDataList.push(this.pieList[i].datas);
        this.pieNumList.push({value:this.pieList[i].num,name:this.pieList[i].datas})
      }
    },
    // 饼状图
    pieCharts () {
      let myChart = this.$echarts.init(this.$refs.pieCharts)
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: 'center',
          data: this.pieDataList
        },
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: this.pieNumList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    // 切换柱状图
    changeColumnar (val){
      this.columnarDataList = []
      this.columnarNumList = []
      if (val === 1){
        this.findDateData()
      }else if (val === 2){
        this.signDateData ()
      }
    },
    // 发现日期查询
    findDateData () {
      this.$axios.get('http://localhost:8088/find-date-list')
        .then(v => {
          this.columnarList = v.data
          //计算日期
          this.computeDate()
        })
        .catch(function (v) {})
    },
    // 预计签单查询
    signDateData () {
      this.$axios.get('http://localhost:8088/sign-date-list')
        .then(v => {
          this.columnarList = v.data
          //计算日期
          this.computeDate()
        })
        .catch(function (v) {})
    },
    // 计算机会发现时间月份
    computeDate(){
      for(let i=0;i<this.columnarList.length;i++) {
        if (this.columnarList[i].datas === undefined){
          this.columnarDataList.push('');
          this.columnarNumList.push(this.columnarList[i].num)
        }else {
          this.columnarDataList.push(this.columnarList[i].datas);
          this.columnarNumList.push(this.columnarList[i].num)
        }
      }
    },
    // 柱状图
    columnarCharts (){
      let myChart = this.$echarts.init(this.$refs.columnarCharts)
      // 绘制图表0
      myChart.setOption({
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.columnarDataList,
             /* (function(){
                this.findDateData()
                let arr=[];
                for(let i=0;i<this.findDateList.length;i++){
                  arr.push(this.findDateList[i].dates);
                }
                return arr;
              })(),*/
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth: '60%',
            data: this.columnarNumList,
          }
        ]
      })
    },
    // 切换折线图
    changeLine(val){
      this.lineDataList = []
      this.lineNumList = []
      if (val == 1){
        this.statusData()
      }else if (val == 2){
        this.stageData ()
      }else if(val == 3){
        this.possibilityData()
      }
    },
    // 状态查询
    statusData () {
      this.$axios.get('http://localhost:8088/status-list')
        .then(v => {
          this.lineList = v.data
          //计算状态
          this.computeStatus()
        })
        .catch(function (v) {})
    },
    // 计算状态
    computeStatus(){
      for(let i=0;i<this.lineList.length;i++) {
        if (this.lineList[i].datas === 1){
          this.lineDataList.push('跟踪');
          this.lineNumList.push(this.lineList[i].num);
        } else if (this.lineList[i].datas === 2){
          this.lineDataList.push('成功');
          this.lineNumList.push(this.lineList[i].num);
        }else if (this.lineList[i].datas === 3){
          this.lineDataList.push('失败');
          this.lineNumList.push(this.lineList[i].num);
        }else if (this.lineList[i].datas === 4){
          this.lineDataList.push('搁置');
          this.lineNumList.push(this.lineList[i].num);
        }else if (this.lineList[i].datas === 5){
          this.lineDataList.push('失效');
          this.lineNumList.push(this.lineList[i].num);
        }
      }
    },
    // 阶段查询
    stageData () {
      this.$axios.get('http://localhost:8088/stage-list')
        .then(v => {
          this.lineList = v.data
          //计算阶段
          this.computeStage()
        })
        .catch(function (v) {})
    },
    // 计算阶段
    computeStage(){
      for(let i=0;i<this.lineList.length;i++) {
        if (this.lineList[i].datas === 1){
          this.lineDataList.push('初期沟通');
          this.lineNumList.push(this.lineList[i].num);
        } else if (this.lineList[i].datas === 2){
          this.lineDataList.push('立体评估');
          this.lineNumList.push(this.lineList[i].num);
        }else if (this.lineList[i].datas === 3){
          this.lineDataList.push('需求分析');
          this.lineNumList.push(this.lineList[i].num);
        }else if (this.lineList[i].datas === 4){
          this.lineDataList.push('方案制定');
          this.lineNumList.push(this.lineList[i].num);
        }else if (this.lineList[i].datas === 5){
          this.lineDataList.push('竞争');
          this.lineNumList.push(this.lineList[i].num);
        }else if (this.lineList[i].datas === 6){
          this.lineDataList.push('商务谈判');
          this.lineNumList.push(this.lineList[i].num);
        }else if (this.lineList[i].datas === 7){
          this.lineDataList.push('合同签约');
          this.lineNumList.push(this.lineList[i].num);
        }
      }
    },
    // 可能性查询
    possibilityData () {
      this.$axios.get('http://localhost:8088/possibility-list')
        .then(v => {
          this.lineList = v.data
          //计算可能性
          this.computePossibility()
        })
        .catch(function (v) {})
    },
    // 计算可能性
    computePossibility(){
      for(let i=0;i<this.lineList.length;i++) {
        if (this.lineList[i].datas === 1){
          this.lineDataList.push('0%');
          this.lineNumList.push(this.lineList[i].num);
        } else if (this.lineList[i].datas == 2){
          this.lineDataList.push('10%');
          this.lineNumList.push(this.lineList[i].num);
        }else if (this.lineList[i].datas == 3){
          this.lineDataList.push('20%');
          this.lineNumList.push(this.lineList[i].num);
        }else if (this.lineList[i].datas == 4){
          this.lineDataList.push('30%');
          this.lineNumList.push(this.lineList[i].num);
        }else if (this.lineList[i].datas == 5){
          this.lineDataList.push('40%');
          this.lineNumList.push(this.lineList[i].num);
        }else if (this.lineList[i].datas == 6){
          this.lineDataList.push('50%');
          this.lineNumList.push(this.lineList[i].num);
        }else if (this.lineList[i].datas == 7){
          this.lineDataList.push('60%');
          this.lineNumList.push(this.lineList[i].num);
        }else if (this.lineList[i].datas == 8){
          this.lineDataList.push('70%');
          this.lineNumList.push(this.lineList[i].num);
        }else if (this.lineList[i].datas == 9){
          this.lineDataList.push('80%');
          this.lineNumList.push(this.lineList[i].num);
        }else if (this.lineList[i].datas == 10){
          this.lineDataList.push('90%');
          this.lineNumList.push(this.lineList[i].num);
        }else if (this.lineList[i].datas == 11){
          this.lineDataList.push('100%');
          this.lineNumList.push(this.lineList[i].num);
        }else {
          this.lineDataList.push('');
          this.lineNumList.push(this.lineList[i].num);
        }
      }
    },
    //折线图
    lineCharts (){
      let myChart = this.$echarts.init(this.$refs.lineCharts)
      // 绘制图表0
      myChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['状态']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.lineDataList
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: '数量',
            type: 'line',
            data: this.lineNumList,
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },

          }
        ]
      })
    },
    // 沙漏查询
    salesData(){
      this.$axios.get('http://localhost:8088/stage-list')
        .then(v => {
          this.salesList = v.data
          //计算阶段
          this.computeSales()
        })
        .catch(function (v) {})
    },
    // 计算销售漏斗
    computeSales(){
      for(let i=0;i<this.salesList.length;i++) {
        if (this.salesList[i].datas === 1){
          this.salesDataList.push('初期沟通');
          this.salesNumList.push({value:this.salesList[i].num,name:'初期沟通'})
          this.salesSumList.push({value:this.salesList[i].sum,name:'初期沟通'})
        } else if (this.salesList[i].datas === 2){
          this.salesDataList.push('立体评估');
          this.salesNumList.push({value:this.salesList[i].num,name:'立体评估'})
          this.salesSumList.push({value:this.salesList[i].sum,name:'立体评估'})
        }else if (this.salesList[i].datas === 3){
          this.salesDataList.push('需求分析');
          this.salesNumList.push({value:this.salesList[i].num,name:'需求分析'})
          this.salesSumList.push({value:this.salesList[i].sum,name:'需求分析'})
        }else if (this.salesList[i].datas === 4){
          this.salesDataList.push('方案制定');
          this.salesNumList.push({value:this.salesList[i].num,name:'方案制定'})
          this.salesSumList.push({value:this.salesList[i].sum,name:'方案制定'})
        }else if (this.salesList[i].datas === 5){
          this.salesDataList.push('竞争');
          this.salesNumList.push({value:this.salesList[i].num,name:'竞争'})
          this.salesSumList.push({value:this.salesList[i].sum,name:'竞争'})
        }else if (this.salesList[i].datas === 6){
          this.salesDataList.push('商务谈判');
          this.salesNumList.push({value:this.salesList[i].num,name:'商务谈判'})
          this.salesSumList.push({value:this.salesList[i].sum,name:'商务谈判'})
        }else if (this.salesList[i].datas === 7){
          this.salesDataList.push('合同签约');
          this.salesNumList.push({value:this.salesList[i].num,name:'合同签约'})
          this.salesSumList.push({value:this.salesList[i].sum,name:'合同签约'})
        }
      }
    },
    // 阶段销售漏斗数量
    salesCharts () {
      let myChart = this.$echarts.init(this.$refs.salesCharts);
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          data: this.salesDataList
        },
        series: [
          {
            name:'漏斗图',
            type:'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              },
              position: 'inside',
              formatter: '{b}: {c}'
            },
            data: this.salesNumList
          }
        ]
      })
    },
    // 阶段销售漏斗金额
    salesSumCharts () {
      let myChart = this.$echarts.init(this.$refs.salesSumCharts);
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          data: this.salesDataList
        },
        series: [
          {
            name:'漏斗图',
            type:'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: this.salesSumList
          }
        ]
      })
    },
    // pdf打印
    handleWindowPrint (ele, fileName) {
      document.body.innerHTML = document.querySelector(ele).outerHTML
      // 转异步 等待dom元素渲染（样式）完毕在打印
      setTimeout(() => {
        // 打印
        window.print()
        // 刷新页面
        window.location.reload()
      }, 20)
    },
    //导出excel
    exportExcel () {
      var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
      var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
          "机会导出.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    //批量导出excel batchList
    batchExportExcel(){
      this.mulSelection.forEach((item,i)=>{
        this.$set(item,'oppId',item.oppId);
        this.$set(item,'oppTheme',item.oppTheme);
        this.$set(item,'customerName',item.customerByCustomerId.customerName);
        if (item.oppPriority !== null){
          this.$set(item,'oppPriority',this.yxOptions[item.oppPriority - 1].label);
        }
        if (item.oppClassify !== null){
          this.$set(item,'oppClassify',this.lxOptions[item.oppClassify - 1].label);
        }
        this.$set(item,'empName',item.employeeByEmpId.empName);
        this.$set(item,'oppSignDate',item.oppSignDate)
        this.$set(item,'oppExpectSum','￥'+item.oppExpectSum)
        if (item.oppPossibility !== null){
          this.$set(item,'oppPossibility',this.knxOptions[item.oppPossibility - 1].label);
        }
        this.$set(item,'oppStage',this.jdOptions[item.oppStage - 1].label);
        if (item.oppStatus !== null){
          this.$set(item,'oppStatus',this.ztOptions[item.oppStatus - 1].label);
        }
        this.$set(item,'oppUpdateDate',item.oppUpdateDate);
        this.selectList.splice(i,0,item);
      })
      //excel数据导出
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require('../js/Export2Excel');
        const tHeader = ['ID','机会主题','客户','优先','类型','负责人','预计签单日期', '预期金额', '可能性','阶段','状态','更新日期'];
        const filterVal = ['oppId','oppTheme','customerName','oppPriority','oppClassify','empName','oppSignDate', 'oppExpectSum','oppPossibility',
          'oppStatus','oppUpdateDate'];
        const list = this.selectList;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '机会批量导出');
      })
      this.initData(this.currPage,this.pageSize,this.filterValue,this.vagueValue,this.content)
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    // 表头靠左样式
    rowClass(){
      return "text-align:left"
    }
  },
  created: function () {
    this.loginEmp()
    this.sourceData()
    this.findDateData()
    this.statusData()
    this.salesData()
    this.initData(this.currPage,this.pageSize,this.filterValue,this.vagueValue,this.content)
  },
  mounted:function () {

  },
  updated() {
    this.pieCharts()
    this.columnarCharts()
    this.lineCharts()
    this.salesCharts()
    this.salesSumCharts()
  },
  watch:{
    pieList(val){
      this.pieCharts()
    },
    columnarList(val) {
      this.columnarCharts()
    },
    lineList(val){
      this.lineCharts()
    },
    salesList(val){
      this.salesCharts()
      this.salesSumCharts()
    }
  },
    filters: {
      formatDateJudge: function(time) {
        if(time != null && time != "")
        {
          let date = new Date(time);
          let currentDate = new Date()
          let seperator1 = "-";
          let month = currentDate.getMonth() + 1<10? "0"+(currentDate.getMonth() + 1):currentDate.getMonth() + 1;
          let strDate = currentDate.getDate()<10? "0" + currentDate.getDate():currentDate.getDate();
          let today = currentDate.getFullYear() + seperator1  + month  + seperator1  + strDate
          let todayTime = new Date(today)
          let yesterday = todayTime.setDate(todayTime.getDate() - 1)
          let beforeYesterday = todayTime.setDate(todayTime.getDate() - 1)
          let tomorrow = todayTime.setDate(todayTime.getDate() + 3)
          let afterTomorrow = todayTime.setDate(todayTime.getDate() + 1)
          todayTime.setDate(todayTime.getDate() - 2)
          if (date.getTime() === todayTime.getTime()){
            return '今天'
          }else if (date.getTime() ===  yesterday){
            return '昨天'
          }else if (date.getTime() ===  beforeYesterday){
            return '前天'
          }else if (date.getTime() ===  tomorrow){
            return '明天'
          }else if (date.getTime() ===  afterTomorrow){
            return '后天'
          }else {
            return time
          }
        }else{
          return "";
        }
      }
    }
}
</script>

<style>
</style>
